<template>
  <div class="achievement-center">
    <!-- 顶部标题 -->
    <!-- <div class="center-title">
      <span>成果聚合中心</span>
    </div> -->
    
    <!-- 中心动画区域 -->
    <div class="center-animation">
      <!-- 主背景图 -->
      <img class="main-background" src="../../images/main-view.png" alt="主背景" />
      
      <!-- 光效图层 -->
      <img class="light-effect" src="../../images/light.png" alt="光效" />
      
      <!-- AI机器人 -->
      <img class="ai-robot" src="../../images/AI.png" alt="AI机器人" />
      
      <!-- 中心LOGO -->
      <img class="center-logo" src="../../images/gwgsdrp.png" alt="中心LOGO" />
      
      <!-- 围绕的LOGO -->
      <!-- <img class="floating-logo nanrui-logo" src="../../images/nanrui_logo.png" alt="南瑞LOGO" />
      <img class="floating-logo xidian-logo" src="../../images/xidian_logo.png" alt="西电LOGO" />
      <img class="floating-logo qinghua-logo" src="../../images/qinghua_logo.png" alt="清华LOGO" /> -->
      
      <!-- 旋转的圆形模块 -->
      <div class="circle-modules">
        <div class="circle-module module-1">
          <img class="circle-bg" src="../../images/base1.png" alt="底座" />
          <img class="circle-icon-bg" src="../../images/NO1.icon.png" alt="图标背景" />
          <img class="circle-icon" src="../../images/qdxy.png" alt="庆电小云" />
          <span class="circle-text">庆电小云</span>
        </div>
        
        <div class="circle-module module-2">
          <img class="circle-bg" src="../../images/base1.png" alt="底座" />
          <img class="circle-icon-bg" src="../../images/NO1.icon.png" alt="图标背景" />
          <img class="circle-icon" src="../../images/RPA.png" alt="RPA规模化应用" />
          <span class="circle-text">RPA规模化应用</span>
        </div>
        
        <div class="circle-module module-3">
          <img class="circle-bg" src="../../images/base1.png" alt="底座" />
          <img class="circle-icon-bg" src="../../images/NO1.icon.png" alt="图标背景" />
          <img class="circle-icon" src="../../images/xjsyy.png" alt="新技术应用" />
          <span class="circle-text">新技术应用</span>
        </div>
        
        <div class="circle-module module-4">
          <img class="circle-bg" src="../../images/base1.png" alt="底座" />
          <img class="circle-icon-bg" src="../../images/NO1.icon.png" alt="图标背景" />
          <img class="circle-icon" src="../../images/zhwl.png" alt="智慧物联" />
          <span class="circle-text">智慧物联</span>
        </div>
        
        <div class="circle-module module-5">
          <img class="circle-bg" src="../../images/base1.png" alt="底座" />
          <img class="circle-icon-bg" src="../../images/NO1.icon.png" alt="图标背景" />
          <img class="circle-icon" src="../../images/kjcxqn.png" alt="科技创新潜能" />
          <span class="circle-text">科技创新潜能</span>
        </div>
        
        <div class="circle-module module-6">
          <img class="circle-bg" src="../../images/base1.png" alt="底座" />
          <img class="circle-icon-bg" src="../../images/NO1.icon.png" alt="图标背景" />
          <img class="circle-icon" src="../../images/shudianzhineng.png" alt="输电智能化" />
          <span class="circle-text">输电智能化</span>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
export default {
  name: "Page3Centet",
	props: {
		companiesData: {
			type: Array,
			required: true,
			default: () => []
		}
	},
	data() {
		return {
      // 保持原有的props接口，但不再使用
		}
	},
	mounted() {
    // 组件挂载后可以添加一些初始化逻辑
	},
	beforeDestroy() {
    // 清理资源
	},
	methods: {
		initChart() {
      // 保持与其他组件的API兼容性
      // 新组件不需要图表初始化，但需要这个方法避免父组件报错
		}
	}
};
</script>

<style lang="scss" scoped>
.achievement-center {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	--scale: 0.75;
	
  .center-title {
		position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    
    span {
      font-size: 32px;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
      background: linear-gradient(90deg, #00ffff, #66ccff, #00ffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }
  
  .center-animation {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-10%) scale(var(--scale));
    transform-origin: center center;
    
    .main-background {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 95%;
      height: 95%;
      object-fit: contain;
      z-index: 1;
      opacity: 0.9;
    }
    
    .light-effect {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60%;
      height: 60%;
      object-fit: contain;
		z-index: 2;
      animation: lightPulse 3s ease-in-out infinite;
    }
    
    .ai-robot {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      height: 400px;
      object-fit: contain;
      z-index: 4;
      animation: robotFloat 4s ease-in-out infinite;
    }
    
    .center-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180px;
      height: 180px;
      object-fit: contain;
      z-index: 3;
      margin-top: -80px;
    }
    
    .floating-logo {
		position: absolute;
      width: 160px;
      height: 160px;
      object-fit: contain;
		z-index: 1003;
		
      &.nanrui-logo {
        top: 38%;
        left: 33%;
        animation: floatAnimation1 3s infinite ease-in-out;
      }
      
      &.xidian-logo {
        top: 48%;
        left: 46%;
        animation: floatAnimation2 2.5s infinite ease-in-out;
      }
      
      &.qinghua-logo {
        top: 28%;
        left: 58%;
        animation: floatAnimation3 3.5s infinite ease-in-out;
      }
    }
    
    .circle-modules {
      position: absolute;
      top: 48%;
      left: 48%;
      transform: translate(-60%, -60%);
      width: 1000px;
      height: 1000px;
      z-index: 5;
      
      .circle-module {
        position: absolute;
        width: 400px;
        height: 400px;
        top: 50%;
        left: 50%;
        transform-origin: 0 0;
        
        .circle-bg {
          position: absolute;
          bottom: -100px;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
        
        .circle-icon-bg {
          position: absolute;
          top: 10%;
          left: 10%;
          width: 80%;
          height: 80%;
          object-fit: contain;
          z-index: 1;
        }
        
        .circle-icon {
			position: absolute;
          top: 25%;
          left: 25%;
          width: 50%;
          height: 50%;
          object-fit: contain;
          z-index: 2;
        }
        
        .circle-text {
          position: absolute;
          bottom: -90px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 36px;
				font-weight: bold;
          color: #ffffff;
          text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
          white-space: nowrap;
          z-index: 3;
        }
        
        // 6个模块的椭圆轨迹分布 - 使用原来的动画原理
        &.module-1 {
          animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate, 
                     animY 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate, 
                     scale 24s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
        }
        
        &.module-2 {
          animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate, 
                     animY 12s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate, 
                     scale 24s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
        }
        
        &.module-3 {
          animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate, 
                     animY 12s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate, 
                     scale 24s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
        }
        
        &.module-4 {
          animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate, 
                     animY 12s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate, 
                     scale 24s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
        }
        
        &.module-5 {
          animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -22s infinite alternate, 
                     animY 12s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate, 
                     scale 24s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate;
        }
        
        &.module-6 {
          animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -26s infinite alternate, 
                     animY 12s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate, 
                     scale 24s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate;
				}
			}
		}
	}
}

// 动画效果
@keyframes lightPulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes robotFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0px);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-10px);
  }
}

@keyframes floatAnimation1 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-28px);
  }
}

@keyframes floatAnimation2 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-26px);
  }
}

@keyframes floatAnimation3 {
	0%, 100% {
    transform: translateY(0px);
	}
	50% {
    transform: translateY(-20px);
	}
}

@keyframes rotateModules {
	0% {
    transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes keepTextUpright {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(-360deg);
  }
}

@keyframes rotateModules {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

// 原来的椭圆轨迹动画实现
@keyframes animX {
  0% {
    left: -20%;
  }
  100% {
    left: 120%;
  }
}

@keyframes animY {
  0% {
    top: 20%;
  }
  100% {
    top: 80%;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.6);
    opacity: 0.6;
  }
}
</style>